<section data-ng-controller="CreateChartIntroController">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <i class="fa fa-spinner fa-spin"></i> your account is creating...
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3">
            <h1>Create a new chart</h1>
            <form name="newChartForm" novalidate="" mi-submit="submit()">
                <div class="alert alert-danger" id="error-box" data-ng-show="isServerError">
                    <span data-ng-bind="serverError"></span>
                </div>

                <!-- chart name -->
                <div class="form-group" ng-class="{'has-error':(newChartForm.chartName | shouldDisplayError:newChartForm)}">
                    <label for="chartName">Name</label>
                    <input type="text" class="form-control" id="chartName" name="chartName"
                            placeholder="new chart name" required="" data-ng-model="newChart.name"/>
                </div>
                <!-- caption -->
                <div class="form-group">
                    <label for="caption">Caption</label>
                    <input type="text" class="form-control" id="caption" name="caption"
                           placeholder="caption" data-ng-model="newChart.caption"/>
                </div>
                <!-- description -->
                <div class="form-group">
                    <label for="caption">Description</label>
                    <input type="text" class="form-control" id="description" name="description"
                           placeholder="description" data-ng-model="newChart.description"/>
                </div>
                <!-- type -->
                <div class="form-group">
                    <label>
                        <input type="radio" name="chartType" value="open" checked data-ng-model="newChart.type"/> Open
                    </label>
                    <label>
                        <input type="radio" name="chartType" value="close" data-ng-model="newChart.type"/> Close
                    </label>
                    <label>
                        <input type="radio" name="chartType" value="private" data-ng-model="newChart.type"/> Private
                    </label>
                </div>
                <!-- items -->
                <!--<div>-->
                    <!--<input type="hidden" data-ng-model="newChart.items" to-array-required id="chartItems" name="chartItems"/>-->
                    <!--<to-add-chart-item></to-add-chart-item>-->
                <!--</div>-->
                <hr/>
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i> Save</button>
            </form>
        </div>
    </div>
</section>
